export default {

    /* 
    el = 指令作用的目标元素
    binding = 携带指令的参数
    vnode = 元素的底层vnode（可以用于跨生命周期地共享数据）
    */
    mounted(el, binding, vnode) {
        console.log("v-hover所在的目标组件挂载惹:binding=", binding);

        // { backgroundColor: 'green', color: 'white' }
        const { value: targetStyles } = binding

        /* 拿到el的默认样式 */
        const allStyles = window.getComputedStyle(el)
        // console.log(allStyles);
        const originalStyles = {}
        for (const key in targetStyles) {
            originalStyles[key] = allStyles[key]
        }
        console.log(originalStyles);

        vnode.mouseoverHandler = e => {
            console.log("on mouse over");
            for (const key in targetStyles) {
                el.style[key] = targetStyles[key]
            }
        }

        vnode.mouseoutHandler = e => {
            console.log("on mouse out");
            for (const key in originalStyles) {
                el.style[key] = originalStyles[key]
            }
        }


        // 给目标元素el添加mouseover侦听器
        // 鼠标覆盖时 给el应用targetStyles中的全部样式
        el.addEventListener(
            "mouseover",
            vnode.mouseoverHandler
        )

        // 给目标元素el添加mouseout侦听器
        // 鼠标离开时 给el应用 原来的 全部样式
        el.addEventListener(
            "mouseout",
            vnode.mouseoutHandler
        )

    },

    beforeUnmount(el = new HTMLElement(), binding, vnode) {
        console.log("v-hover所在的目标组件即将卸载 vnode=", vnode);

        /* 移除绑定在绑定在目标元素el身上的两个侦听器 */
        el.removeEventListener("mouseover", vnode.mouseoverHandler)
        el.removeEventListener("mouseout", vnode.mouseoutHandler)
    }
    
}